<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增轮播图')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>

</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-ncHeader-add">
        <input id="hCover" name="hCover" type="hidden">


        <div class="form-group">
            <label class="col-sm-3 control-label">标题：</label>
            <div class="col-sm-8">
                <input id="hName" name="hName" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">简介：</label>
            <div class="col-sm-8">
                <input id="hDesc" name="hDesc" class="form-control" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">链接：</label>
            <div class="col-sm-8">
                <input id="hUrl" name="hUrl" class="form-control" type="text">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">图片：</label>
            <div class="col-sm-8">
                <div class="file-loading col-sm-8">
                    <input id="pic-upload" name="file" type="file">
                </div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label">启用：</label>
            <div class="col-sm-8">
                <div class="radio-box" th:each="dict : ${@dict.getType('sys_yes_no')}">
                    <input type="radio" th:id="${dict.dictCode}" name="hState" th:value="${dict.dictValue}"
                           th:checked="${dict.default}">
                    <label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
            </div>
        </div>


    </form>
</div>
<div th:include="include::footer"></div>
<th:block th:include="include :: bootstrap-fileinput-js"/>

<script type="text/javascript">
    var prefix = ctx + "system/ncHeader"
    $("#form-ncHeader-add").validate({
        rules: {
            xxxx: {
                required: true,
            },
        },
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-ncHeader-add').serialize());
        }
    }

    /*文件上传*/
  
    $("#pic-upload").fileinput({
        'theme': 'explorer-fas',
        overwriteInitial: true,
        initialPreviewAsData: true,
        language: 'zh', //设置语言
        uploadUrl: ctx + "common/upload", //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png', 'JPG', 'jpeg'],//接收的文件后缀
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: true, //默认异步上传
        showUpload: true, //是否显示上传按钮
        showRemove: true, //显示移除按钮
        showPreview: true, //是否显示预览
        showCaption: true,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        //dropZoneEnabled: true,//是否显示拖拽区域
        //minImageWidth: 50, //图片的最小宽度
        //minImageHeight: 50,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        //maxFileCount: 10, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount: true,
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        initialPreview: [
            "/img/profile.jpg"
        ]

    }).on('filepreupload', function (event, data, previewId, index) {     //上传中
        console.log('文件正在上传');
    }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
        console.log(data)
        $('#hCover').val(data.response.fileName);
    }).on('fileerror', function (event, data, msg) {  //一个文件上传失败
        layer.alert("<font color='red'>上传失败！</font>", {
            icon: 0,
            title: "系统提示"
        });
    });
</script>
</body>
</html>
